<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            //给创建添加点击事件
            $("#createDicTypeBtn").click(function () {
                window.location.href = "settings/dictionary/type/tosave.do";
            });
            //给编辑添加点击事件
            $("#editDicTypeBtn").click(function () {

                var checkbox = $("input[type='checkbox']:checked");
                if (checkbox.length == 0) {
                    layer.msg("请选择要修改的数据")
                    return false;
                }
                if (checkbox.length > 1) {
                    layer.msg("一次只能选择一条数据进行修改")
                    return false;
                }
                if (checkbox.length == 1) {
                    var code = checkbox[0].value;
                    window.location.href = "settings/dictionary/type/getDicType.do?code=" + code;
                }
            });
            //复选框的全选全不选
            $("#chkedAll").click(function () {
                $("#tBody input[type='checkbox']").prop("checked", this.checked);
            });
            $("input[type='checkbox']:gt(0)").click(function () {
                if ($("input[type='checkbox']:gt(0):checked").length == $("input[type='checkbox']:gt(0)").length) {
                    $("#chkedAll").prop("checked", true);
                } else {
                    $("#chkedAll").prop("checked", false);
                }
            });

            //给删除按钮添加点击事件
            $("#deleteDicTypeBtn").click(function () {
                //如果没有被选中则提示用户
                var ck = $("input[type='checkbox']:checked");
                if (ck.length == 0) {
                    layer.msg("请选择要删除的数据")
                    return false;
                }
                //定义一个list集合用于保存ck的value值
                var codes = [];
                //获取被选中的复选框的属性值
                for (var i = 0; i < ck.length; i++) {
                    var code = ck[i].value;
                    codes.push(code);
                }
                //将数组转为json进行传递
                var codesjson = JSON.stringify(codes);
                //window.confirm("是否确认删除?");取消返回false，确定返回true
                //layer弹窗确认取消
                layer.confirm('是否确认删除？', {
                    btn: ['取消','确认'] //按钮
                }, function(){
                    window.location.href = "settings/dictionary/type/index.do";
                    // layer.msg('删除已取消');
                }, function() {
                    $.ajax({
                        url: "settings/dictionary/type/remove.do",
                        type: "post",
                        data: codesjson,
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.successCode == 0) {
                                layer.msg("删除失败");
                            } else {
                                window.location.href = "settings/dictionary/type/index.do";
                            }
                        }
                    })
                })

            });
        })
    </script>
</head>
<body>

<div>
    <div style="position: relative; left: 30px; top: -10px;">
        <div class="page-header">
            <h3>字典类型列表</h3>
        </div>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
    <div class="btn-group" style="position: relative; top: 18%;">
        <button id="createDicTypeBtn" type="button" class="btn btn-primary"><span
                class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button id="editDicTypeBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-edit"></span>
            编辑
        </button>
        <button id="deleteDicTypeBtn" type="button" class="btn btn-danger"><span
                class="glyphicon glyphicon-minus"></span> 删除
        </button>
    </div>
</div>
<div style="position: relative; left: 30px; top: 20px;">
    <table class="table table-hover">
        <thead>
        <tr>
            <th><input type="checkbox" id="chkedAll"/></th>
            <th>序号</th>
            <th>编码</th>
            <th>名称</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody id="tBody">
        <c:if test="${empty requestScope.dicTypeList}">
            <tr>
                <td colspan="5">
                    没有数据!
                </td>
            </tr>
        </c:if>
        <c:if test="${not empty requestScope.dicTypeList}">
            <!--从request获取dicTypeList，遍历dicTypeList，显示所有的数据-->
            <c:forEach items="${requestScope.dicTypeList}" var="dt" varStatus="vs">
                <c:if test="${vs.count%2==0}">
                    <tr class="active">
                        <td><input type="checkbox" value="${dt.code}"/></td>
                        <td>${vs.count}</td>
                        <td>${dt.code}</td>
                        <td>${dt.name}</td>
                        <td>${dt.description}</td>
                    </tr>
                </c:if>
                <c:if test="${vs.count%2!=0}">
                    <tr>
                        <td><input type="checkbox" value="${dt.code}"/></td>
                        <td>${vs.count}</td>
                        <td>${dt.code}</td>
                        <td>${dt.name}</td>
                        <td>${dt.description}</td>
                    </tr>
                </c:if>
            </c:forEach>
        </c:if>
        </tbody>
    </table>
</div>

</body>
</html>